import React, {Component} from "react";
import { withRouter } from 'react-router-dom';
import Loading from '@/component/loading';
import Pagination from './Pagination';
import { Empty } from 'antd';

class Body extends Component{
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            total: 0,
            data: []
        }
    }

    componentDidMount() {
        this.getDataList();
        this.props.onRef && this.props.onRef(this)
    }

    render() {
        const { data, total } = this.state;
        return (
            <>
                {
                    this.state.loading && <Loading />
                }
                <div className="lesson-box">
                    {
                        !data.length && <Empty />
                    }
                    {
                        data.map((item, index) => {
                            const { coursewareInfos } = item;
                            return (
                                <div className="item" key={item.id}>
                                    <div className="title">
                                        <div className="left">
                                            <span className="border">第{item.orderNum}课时</span>
                                            <span>{item.classhourName}</span>
                                        </div>
                                        <div className="date right">
                                            <span>授课教师：</span>{item.teacherName}
                                            <span>预计课时时间：</span>{item.startTime}
                                        </div>
                                    </div>
                                    <div className={"content " + !!item.show}>
                                        {
                                            coursewareInfos.length
                                            ?   <div className="operation" onClick={() => this.showMoreData(index)}>
                                                    <div className="more">
                                                        <div className="icon"></div>显示全部
                                                    </div>
                                                </div>
                                            :   <div className="card empty">
                                                    <div className="file-icon"></div>
                                                    <div className="file-name">暂无课件，快去添加吧~</div>
                                                </div>
                                        }
                                        {
                                            coursewareInfos.map((itemJ, indexJ) => {
                                                return  <div className="card" key={indexJ} title={itemJ.fileOriginalName}>
                                                            <div className={'file-icon ' + itemJ.fileSuffix.slice(1)}></div>
                                                            <div className="file-name">{itemJ.fileOriginalName}</div>
                                                        </div>
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                {
                    data.length
                        ? <Pagination total={total} pagination={this.props.config.pagination} callback={this.getDataList.bind(this)} />
                        : ''
                }
            </>
        )
    }

    // 获取数据列表
    getDataList (pagination = this.props.config['pagination']){
        const { request, params } = this.props.config;
        this.setState({
            loading: true
        });
        this.axios({
            ...request,
            data: {
                ...pagination,
                ...params
            }
        }).then(res => {
            if(res.success){
                this.setState({
                    data: (res.data && res.data.list) || [],
                    total: (res.data && res.data.totalRow) || 0
                })
            }
            this.setState({
                loading: false
            })
        })
    }

    // 展示所有图标
    showMoreData (index){
        this.setState((state) => {
            return state.data[index].show = !state.data[index].show
        })
    }
}

export default withRouter(Body)
